/*
* @Description:网络扩展-通道扩展
* @Author: lil
* @Date: 2021/11/22
**/
<template>
  <div>
    <!-- 表格 -->
    <el-table :data="tableData" border>
      <el-table-column type="index" label="序号" align="center" width="70">
      </el-table-column>
      <el-table-column prop="name" label="名字" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column prop="organization" label="组织" align="center" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="操作" align="center" width="180">
        <template slot-scope="scope">
          <el-button type="text" class="iconfont zfsoft-dianzibiaodan-danxuananniu"
            @click="chooseChannel(scope.$index, scope.row)">选择通道
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <!-- <el-pagination background :page-sizes="[100, 200, 300, 400]" :page-size="100"
      layout="total, sizes, prev, pager, next, jumper" :total="400">
    </el-pagination> -->
    <!-- 弹窗：选择通道 -->
    <el-dialog title="通道扩展" v-if="dialogVisible" :close-on-click-modal="false" :visible.sync="dialogVisible" width="45%"
      @close="closeChannelExtendDLG">
      <select-channel :channelName="channelName" :channelOrgs="channelOrgs" @close-dialog="closeSelectChannel">
      </select-channel>
    </el-dialog>
  </div>
</template>
<script>
  import selectChannel from './selectChannel'

  import {
    getChannelList
  } from '@/api/blockchain/networkmanage'
  export default {
    components: {
      selectChannel
    },

    data() {
      return {
        dialogVisible: false,
        channelName: '',
        channelOrgs: '',
        tableData: []
      };
    },
    mounted() {
      this.getOrgStatusList();
    },
    methods: {
      getOrgStatusList() {
        var _this = this;
        getChannelList().then(function (res) {
          _this.tableData = [];
          for (let i = 0; i < res.length; i++) {
            _this.tableData.push({
              name: '',
              organization: ''
            });
            _this.tableData[i].name = res[i].name;
            _this.tableData[i].organization = res[i].orgs;
          }
        }).catch((err) => {
          console.log(err);
        });
      },
      chooseChannel(index, row) {
        var _this = this;
        _this.$confirm('确认选择该通道, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          this.dialogVisible = true;
          _this.channelName = _this.tableData[index].name;
          _this.channelOrgs = _this.tableData[index].organization;
        }).catch(() => {});
      },
      closeChannelExtendDLG() {
        this.getOrgStatusList();
      },
      closeSelectChannel(val) {
        this.$emit('getSelectedVal', val);
        this.dialogVisible = false;
        this.getOrgStatusList();
      },
    }
  };

</script>
